import { Link, useLocation, useNavigate } from 'react-router-dom';
import Avatar from '../Avatar/Avatar';
import useUserInfoStore from '@/store/userInfoStore';
import { useShallow } from 'zustand/shallow';

/**
 * 头部组件 用于显示首页头部信息
 * @returns
 */
const Header = () => {
  const pathname = useLocation().pathname;
  const navigate = useNavigate();
  const { id, user_name } = useUserInfoStore(
    useShallow((state) => ({
      id: state.userInfo.id,
      user_name: state.userInfo.user_name,
    }))
  );
  return (
    <div className="w-full bg-gradient-to-r from-emerald-800 via-emerald-700 to-emerald-600 shadow-lg fixed top-0 left-0 right-0 z-50">
      <div className="w-full mx-auto px-10 py-6">
        <div className="flex justify-between items-center">
          <div
            className="flex items-center space-x-2 cursor-pointer"
            onClick={() => navigate('/')}
          >
            <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center">
              <span className="text-emerald-700 text-xl font-bold">菌</span>
            </div>
            <div className="text-2xl font-bold text-white tracking-wider">
              云南野生菌科普交易平台
            </div>
          </div>

          <nav className="flex space-x-8">
            <Link
              to="/"
              className={`${
                pathname === '/' ? 'text-emerald-200' : 'text-white'
              } hover:text-emerald-200 transition-all duration-300 relative group py-2 `}
            >
              <span className="relative z-10">首页</span>
              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-200 group-hover:w-full transition-all duration-300"></span>
            </Link>
            <Link
              to="/categories"
              className={`${
                pathname === '/categories' ? 'text-emerald-200' : 'text-white'
              } hover:text-emerald-200 transition-all duration-300 relative group py-2 `}
            >
              <span className="relative z-10">文章分类</span>
              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-200 group-hover:w-full transition-all duration-300"></span>
            </Link>
            <Link
              to="/business"
              className="text-white hover:text-emerald-200 transition-all duration-300 relative group py-2"
            >
              <span className="relative z-10">商城</span>
              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-200 group-hover:w-full transition-all duration-300"></span>
            </Link>
          </nav>

          <div className="flex items-center space-x-6">
            {!id ? (
              <Link
                to="/login"
                className="px-6 py-2 bg-white text-emerald-700 rounded-full font-medium hover:bg-emerald-100 transition-all duration-300 shadow-md hover:shadow-lg"
              >
                登录/注册
              </Link>
            ) : (
              <>
                <div className="text-white">欢迎, {user_name}</div>
                <div className="border-l border-emerald-500 h-8"></div>
                <Avatar />
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;
